<template>
  <el-dialog :title="title" :model-value="visible" width="700px" append-to-body @close="handleClose">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="网关名称" prop="gatewayName">
            <el-input v-model="form.gatewayName" placeholder="请输入网关名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网关类型" prop="gatewayType">
            <el-select v-model="form.gatewayType" placeholder="请选择网关类型" style="width: 100%">
              <el-option label="边缘网关" value="edge" />
              <el-option label="协议网关" value="protocol" />
              <el-option label="云端网关" value="cloud" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="IP地址" prop="ipAddress">
            <el-input v-model="form.ipAddress" placeholder="请输入IP地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口" prop="port">
            <el-input-number v-model="form.port" :min="1" :max="65535" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属区域" prop="region">
            <el-select v-model="form.region" placeholder="请选择所属区域" style="width: 100%">
              <el-option label="华东区" value="east" />
              <el-option label="华南区" value="south" />
              <el-option label="华北区" value="north" />
              <el-option label="西南区" value="southwest" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网关状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="online">在线</el-radio>
              <el-radio label="offline">离线</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="网关描述" prop="description">
        <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入网关描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

// Props
interface Props {
  visible: boolean
  title: string
  formData?: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  title: '',
  formData: () => ({})
})

// Emits
const emit = defineEmits(['update:visible', 'submit', 'cancel'])

// 表单引用
const formRef = ref()

// 表单数据
const form = reactive({
  gatewayId: '',
  gatewayName: '',
  gatewayType: '',
  ipAddress: '',
  port: 8080,
  region: '',
  status: 'online',
  description: ''
})

// 表单验证规则
const rules = {
  gatewayName: [{ required: true, message: '请输入网关名称', trigger: 'blur' }],
  gatewayType: [{ required: true, message: '请选择网关类型', trigger: 'change' }],
  ipAddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
  port: [{ required: true, message: '请输入端口', trigger: 'blur' }],
  region: [{ required: true, message: '请选择所属区域', trigger: 'change' }]
}

// 监听表单数据变化
watch(() => props.formData, (newData) => {
  if (newData) {
    Object.assign(form, newData)
  }
}, { deep: true, immediate: true })

// 监听对话框显示状态
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    resetForm()
  }
})

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    emit('submit', { ...form })
    ElMessage.success('保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 取消
const handleCancel = () => {
  emit('cancel')
  emit('update:visible', false)
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  Object.assign(form, {
    gatewayId: '',
    gatewayName: '',
    gatewayType: '',
    ipAddress: '',
    port: 8080,
    region: '',
    status: 'online',
    description: ''
  })
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>